<!--发布界面-->
<template>
  <div>
    <Main :type="'ordinary'">
      <!-- <Title :title="'微信授权'" /> -->
      <el-steps
        id="stepsWX"
        :active="3"
        finish-status="success"
        style="padding:30px 150px;"
      >
        <el-step title="授权" icon=""></el-step>
        <el-step title="更新" icon=""></el-step>
        <el-step title="预览" icon=""></el-step>
        <el-step title="发布" icon=""></el-step>
      </el-steps>
      <div class="mine" style="text-align: center">
        <div>
          <div v-if="shows" class="stateBox">
            <span v-for="(item, index) in state" :key="index">
              <span v-if="index == shu" class="stateBox-child">
                <img :src="item.img" alt="" /><br />
                <div class="state-child-txt">{{ item.txt }}</div>
                <br />
                <span>{{ reason }} </span>
                <div class="state-child-eve" @click="out(index)">
                  {{ item.eve }}
                </div>
              </span>
            </span>
          </div>
          <div v-else>
            <el-form
              ref="form"
              :model="form"
              class="mine-Form"
              label-width="100px"
            >
              <el-form-item
                label="标题"
                prop="name"
                :rules="[{ required: true, message: '内容不能为空' }]"
              >
                <el-input
                  v-model="form.name"
                  auto-complete="off"
                  size="medium"
                  placeholder="请输入小程序标题"
                ></el-input>
              </el-form-item>

              <el-form-item label="选择类目">
                <el-select
                  v-model="one"
                  class="mine-Form-item"
                  @change="changes1"
                >
                  <el-option
                    v-for="item in UnitRows"
                    :key="item.key"
                    :value="item.name"
                  >
                    {{ item.name }}
                  </el-option>
                </el-select>
                <el-select
                  v-model="two"
                  class="mine-Form-item"
                  style="margin-left: 5px;"
                  @change="changes2"
                >
                  <el-option
                    v-for="item in DepartmentRows"
                    :key="item.key"
                    :value="item.name"
                  >
                    {{ item.name }}
                  </el-option>
                </el-select>
                <el-select
                  v-if="UserList[0]"
                  v-model="three"
                  class="mine-Form-item"
                  style="margin-left: 5px;"
                >
                  <el-option
                    v-for="item in UserList"
                    :key="item.key"
                    :value="item.name"
                  >
                    {{ item.name }}
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="关键词">
                <el-input
                  v-model="form.input"
                  placeholder="请输入检索关键词"
                  maxlength="20"
                  show-word-limit
                  size="medium"
                >
                  <el-button slot="append" @click="addKey">添加</el-button>
                </el-input>
              </el-form-item>
            </el-form>

            <div class="list scrollbars">
              <div v-for="(item, index) in listarr" :key="index" class="box">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item"
                  placement="top"
                >
                  <div class="box-name">
                    {{ item }}
                  </div>
                </el-tooltip>

                <div class="box-del">
                  <i class="el-icon-delete" @click="del(index)"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer>
        <el-button
          v-if="btn"
          type="primary"
          round
          :disabled="shows == true"
          @click="next"
          >提交审核</el-button
        >
        <el-button v-else-if="outs" type="primary" round @click="out(1)"
          >重新提交</el-button
        >
        <el-button v-else type="primary" round @click="release">发布</el-button>
      </Footer>
    </Main>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>是否确定取消审核</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">否</el-button>
        <el-button type="primary" @click="quxiao">是</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GET_CATEGORY,
  AUTHORIZE_STATUS,
  SUBMIT_AUDIT,
  RELEASE,
  LAST_AUDIT_STATUS,
  RELEASE_CALLBACK
} from "./service";

export default {
  name: "FabuBoard",
  data() {
    return {
      dialogVisible: false,
      btn: true,
      reason: "",
      UnitRows: [],
      DepartmentRows: [],
      UserList: [],
      one: "",
      two: "",
      three: "",
      msg: "",
      shu: "",
      listarr: [],
      form: {
        name: "",
        input: ""
      },
      state: [
        {
          img: "http://o6wndwjxn.qnssl.com/69fff201806211507061839.png",
          txt: "审核成功",
          eve: ""
        },
        {
          img: "http://o6wndwjxn.qnssl.com/51d12201806211507154034.png",
          txt: "审核失败",
          eve: ""
        },
        {
          img: "http://o6wndwjxn.qnssl.com/9ea2c201806211454156545.png",
          txt: "审核中",
          eve: "取消审核"
        }
      ],
      shows: false,
      outs: false,
      data1: [],
      data2: []
    };
  },
  created() {
    this.init();
    this.statusApi();
    this.getCategory();
  },
  // 标题的验证方法
  methods: {
    changes1(e) {
      let s;
      this.UnitRows.forEach(ele => {
        if (ele.name === e) {
          s = ele.key;
        }
      });
      this.DepartmentRows = [];
      this.two = "";
      this.data1.forEach(ele => {
        if (ele.pid === s) {
          this.DepartmentRows.push(ele);
        }
      });
    },
    changes2(e) {
      let s;
      this.DepartmentRows.forEach(ele => {
        if (ele.name === e) {
          s = ele.key;
        }
      });
      this.UserList = [];
      this.three = "";
      this.data2.forEach(ele => {
        if (ele.pid === s) {
          this.UserList.push(ele);
        }
      });
    },
    async statusApi() {
      await LAST_AUDIT_STATUS().then(({ code, data }) => {
        if (code === 200) {
          if (data.is_release === 1) {
            this.shows = false;
          } else {
            this.shows = true;
            setTimeout(() => {
              this.reason = data.reason;
              this.outs = false;
              if (data.status === 0) {
                this.shu = data.status;
                this.btn = false;
              } else if (data.status === 1) {
                this.shu = data.status;
                this.btn = false;
                this.outs = true;
              } else {
                this.shu = data.status;
                this.outs = false;
              }
            }, 2000);
          }
        } else {
          this.shows = false;
        }
      });
    },
    out(e) {
      if (e === 2) {
        this.dialogVisible = true;
      } else {
        this.shows = false;
        this.btn = true;
        this.outs = false;
      }
    },
    async quxiao() {
      await RELEASE_CALLBACK().then(({ code, msg }) => {
        if (code === 200) {
          this.dialogVisible = false;
          this.shows = false;
        } else {
          this.$message({
            message: msg,
            type: "warning"
          });
        }
      });
    },
    async init() {
      await AUTHORIZE_STATUS().then(({ code, data }) => {
        if (code === 200) {
          if (data !== "authorized") {
            this.$message({
              message: "您还没有授权，现在进入授权界面",
              type: "success"
            });
            this.$router.push({
              path: "/wxchat",
              name: "wechat"
            });
          }
        }
      });
    },
    async getCategory() {
      await GET_CATEGORY().then(({ code, data }) => {
        if (code === 200) {
          this.UnitRows = data[0];
          this.data1 = data[1];
          this.data2 = data[2];
        }
      });
    },
    addKey() {
      if (!this.form.input) return this.$message.error("关键词不能为空！");
      if (this.listarr.length < 10) {
        this.listarr.push(this.form.input);
        this.form.input = "";
      } else {
        this.$message.error("最多可添加10条！");
      }
    },
    del(index) {
      this.listarr.splice(index, 1);
    },
    // 提交发布页面
    async next() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.listarr.length <= 0)
            return this.$message.error("请填写关键词！");
          let ii = 0;
          [...this.UnitRows].forEach((item, index) => {
            if (item.name === this.one) {
              ii = index;
            }
          });
          let a = 0;
          [...this.DepartmentRows].forEach((item, index) => {
            if (item.name === this.two) {
              a = index;
            }
          });
          let b = 0;
          [...this.UserList].forEach((item, index) => {
            if (item.name === this.three) {
              b = index;
            }
          });

          let pram = {
            keyword: this.listarr.join(","),
            title: this.form.name,
            first_id: this.UnitRows[ii].key,
            first_class: this.one,
            second_id: this.DepartmentRows[a].key,
            second_class: this.two,
            third_id: this.UserList[b] ? this.UserList[b].key : "",
            third_class: this.UserList[b] ? this.three : ""
          };

          SUBMIT_AUDIT(pram).then(({ code, msg }) => {
            if (code === 200) {
              this.statusApi();
              this.$message({
                message: msg,
                type: "success"
              });
            } else {
              this.$message({
                message: msg,
                type: "warning"
              });
            }
          });
        }
      });
    },
    async release() {
      await RELEASE().then(({ code, msg }) => {
        if (code === 200) {
          // root:true代表预览页授权通过
          this.init();
          this.statusApi();
          this.shows = false;
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.mine {
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  min-height: 300px;
  text-align: center;
  .stateBox {
    width: 100%;
    height: 300px;
    .stateBox-child {
      display: inline-block;
      margin-top: 40px;
      .stateBox-child-txt {
        width: 106px;
        text-align: center;
        font-size: 24px;
        margin: 20px 0 5px 0;
        display: inline-block;
      }
      .stateBox-child-eve {
        text-align: center;
        font-size: 14px;
        color: #4ba3ff;
        display: inline-block;
        cursor: pointer;
      }
    }
  }
  .mine-Form {
    width: 50%;
    display: inline-block;
    margin-top: 50px;
    .mine-Form-item {
      display: block;
      float: left;
      height: 40px;
      min-width: 180px;
      border-radius: 3px;
    }
    .mine-Form-scroll {
      max-height: 360px;
    }
  }
}
.list {
  width: 66%;
  max-height: 320px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  .box {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: #ebecf0;
    margin: 0 10px 10px 0;
    font-size: 14px;
    color: #666666;
    .box-name {
      float: left;
      width: 88%;
      padding-left: 10px;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .box-del {
      float: left;
      width: 12%;
    }
  }
}
</style>
<style>
#stepsWX .el-step__head.is-success {
  color: #409eff;
  border-color: #409eff;
}
#stepsWX .el-step__title.is-success {
  color: #409eff !important;
}
</style>
